<template>
	<view class="container">

		<!-- 客服信息区域 -->
		<view class="contact-list">
			
			<!-- 客服微信 -->
			<view class="contact-item">
				<view class="contact-info">
					<view class="contact-label">在线客服-微信</view>
					<view class="contact-value">FfovikH-0312</view>
				</view>
				<view class="contact-action">
					<uni-icons type="chat" size="20" color="#07C160"></uni-icons>
					<text class="action-text" style="color: #07C160;" @click="showCopySuccess('FfovikH-0312')">复制微信</text>
				</view>
			</view>

			<!-- 官方网站 -->
			<view class="contact-item">
				<view class="contact-info">
					<view class="contact-label">官方网站</view>
					<view class="contact-value">www.SHY.com</view>
				</view>
			</view>

			<!-- 客服热线 -->
			<view class="contact-item">
				<view class="contact-info">
					<view class="contact-label">客服热线</view>
					<view class="contact-value">18651956297</view>
				</view>
				<view class="contact-action">
					<uni-icons type="chat" size="20" color="#07C160"></uni-icons>
					<text class="action-text" style="color: #07C160;" @click="showCopySuccess('18651956297')">复制电话</text>
				</view>
			</view>

			<!-- 微信公众号 -->
			<view class="contact-item">
				<view class="contact-info">
					<view class="contact-label">微信公众号</view>
					<view class="contact-value">树上</view>
				</view>
			</view>
			
			<!-- 服务时间 -->
			<view class="service-time">
				<text>服务时间：9:00-21:00</text>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面数据
			};
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			showCopySuccess(data) {
			  uni.setClipboardData({
			    data: data, // 使用传入的参数作为复制内容
			    success: () => {
			      uni.showToast({ title: '复制成功', icon: 'none' });
			    }
			  });
			},
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 联系列表样式 */
	.contact-list {
		flex: 1;
		background-color: #ffffff;
		margin-top: 10px;
	}

	.contact-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid #f5f5f5;
	}

	.contact-info {
		flex: 1;
	}

	.contact-label {
		font-size: 16px;
		color: #333333;
		margin-bottom: 4px;
	}

	.contact-value {
		font-size: 14px;
		color: #999999;
	}

	.contact-action {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.action-text {
		font-size: 14px;
	}

	.service-time {
		padding: 0 16px 14px;
		font-size: 14px;
		color: #999999;
		border-bottom: 1px solid #f5f5f5;
	}

</style>